<template>
  <el-form ref="form" class="form-container"
           :label-width="FormConfig.labelWidth"
           :rules="FormConfig.rules" status-icon
           :label-position="FormConfig.labelPosition"
           :model="FormData"
           >
    <el-row>
      <el-col :span="FormConfig.span" v-for="(item,index) in FormConfig.items" :key="index">
        <el-form-item :label="item.label" :prop="item.ruleName">
          <!-- type是文本框 -->
          <el-input
              v-model="FormData[`${item.model}`]"
              v-if="item.type === 'input' || item.type === 'password'"
              :placeholder="item.placeholder"
              :show-password="item.type === 'password'"
              :clearable="item.clearable"
              :disabled="item.disable"
              @clear="item.onclear === undefined ? () => {} : item.onclear"
          />
          <!-- type是下拉框 -->
          <el-select v-model="FormData[`${item.model}`]"
                     :placeholder="item.placeholder"
                     style="width: 100%" v-else-if="item.type === 'select'"
                     :clearable="item.clearable"
                     @change="item.onchange === undefined ? () => {} : item.onchange"
                     :disabled="item.disable"
                     @clear="item.onclear === undefined ? () => {} : item.onclear"
                    >
            <el-option
                v-for="(option,index) in item.options"
                :key="index"
                :value="option.value"
                :label="option.title"
            ></el-option>
          </el-select>

          <!-- type是数字计数器-->
          <el-input-number :disabled="item.disable" v-else-if="item.type === 'inputnumber'"
                           v-model="FormData[`${item.model}`]" :min="item.min" :max="item.max">
          </el-input-number>

          <!-- cron生成器-->
          <custom-cron-input v-else-if="item.type === 'cron'"
                           v-model="FormData[`${item.model}`]">
          </custom-cron-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import CustomCronInput from "@/components/cron/CustomCronInput";
export default {
  name: "index",
  props: {
    FormConfig: {
      items: [],
      labelWidth: '80px',
      span: 24,
      rules: {},
      // left: 左对齐  right: 右对齐  top： 位于顶部
      labelPosition: 'left'
    },
    FormData: {
      type: Object,
      default: () => {},
      required: true
    }
  },
  components: {CustomCronInput},
  methods: {
    resetFormData() {
      Object.keys(this.FormData).forEach(key => {
        this.FormData[key] = ''
      })
    },
    validate(callback) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (!(callback instanceof Function)) {
            throw new Error('param is not callback function')
          }
         callback()
        } else {
          return false;
        }
      });
    },
  }
}
</script>

<style scoped>

</style>